<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas02</title>
<style>
.box,#canvasbg { width:100%; height:400px; position:relative;}
#canvas { position: absolute; z-index:2; -webkit-filter: hue-rotate(100deg) brightness(1); filter: hue-rotate(100deg) brightness(1); mix-blend-mode: difference; }
#canvasbg { position: absolute; z-index:1; mix-blend-mode: lighter; }
#canvas,#canvasbg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
</style>
</head>

<body>
<div class="box">
	<canvas id='canvas'></canvas>
	<canvas id='canvasbg'></canvas>
</div>

<script src="js/canvas02.js"></script>
</body>
</html>
